<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 头 */
        header {
            height: 58px;
            width: 100%;
            background-color: #191d3a;
        }

        .box {
            width: 1000px;
            height: 58px;
            margin: 0 auto;
        }


        .logo {
            float: left;
            margin-top: 10px;
            margin-right: 30px;
        }

        header ul li {
            float: left;
            list-style: none;
            border-left: 1px solid #252947;
            border-right: 1px solid #252947;
        }

        header li a {
            display: block;
            text-decoration: none;
            color: #7a7c90;
            padding: 0 20px;
            line-height: 58px;
        }

        .jrwm {
            float: left;


        }

        .jrwm button {
            margin-top: 15px;
            width: 80px;
            height: 30px;
            background-color: #38b774;
            border-radius: 13%;
            border: none;
        }

        .jrwm a {
            color: white;
            text-decoration: none;
            line-height: 58px;
        }

        .changeLang {
            display: block;
            float: right;
            width: 10%;
        }

        span a:nth-child(2) {
            margin-left: 10px;
        }

        .changeLang a {
            line-height: 58px;
            text-decoration: none;
            font-size: 14px;
            color: #7a7c90;
        }

        ul li a:hover {
            color: white;
        }

        .changeLang a:hover {
            color: #38b774;
        }

        /* 身体 */
        .content inner_c {
            width: 100%;
            background-color: #000;

        }

        .inner {
            width: 1000px;
            margin: auto;
        }

        .inner img {
            width: 200px;
            height: 120px;
        }

        .inner ul li {
            margin: 0 20px;
            margin-top: 30px;
            width: 20%;
            float: left;
            list-style: none;
        }

        .inner li h3 {
            text-align: center;
        }

        .inner p{
            text-decoration: none;
            color: #38b774;
            font-size: 8px;
            text-align: center;
        }

        .inner li:hover,
        .inner li:hover p
        {
            background-color:#38b774;
            color: white;
            
        }

    </style>
</head>

<body>
    <!-- 头 -->
    <header>
        <div class="box">
            <div class="logo">
                <a href=""><img src="http://www.boyaa.com/images/logo.png" alt=""></a>

            </div>
            <div class="nav">
                <ul>
                    <li><a href="">首页</a></li>
                    <li><a href="">博雅游戏</a></li>
                    <li><a href="">博雅新闻</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">客服中心</a></li>
                </ul>
            </div>
            <div class="jrwm">
                <a href="#"><button>加入我们</button></a>
            </div>
            <div class="changeLang">
                <span>
                    <a href="#">中文</a>
                    <a href="#">EN</a>
                </span>
            </div>
        </div>
    </header>
    <!-- 背景图 -->
    <div class="banner">
        <a href=""><img src="http://www.boyaa.com/pic/probanner4.jpg" alt=""></a>
    </div>
    <!-- 小轮播图 -->
    <div class="content inner_c">
        <div class="inner">
            <ul>
                <li>
                    <a href="#"><img src="http://www.boyaa.com/images/byqpai2.jpg" alt=""></a>
                    <h3>博雅棋牌</h3>
                    <p>点击播放</p>
                </li>
                <li>
                    <a href="#"><img src="http://www.boyaa.com/images/byqpai2.jpg" alt=""></a>
                    <h3>博雅棋牌</h3>
                    <p>点击播放</p>
                </li>
                <li>
                    <a href="#"><img src="http://www.boyaa.com/images/byqpai2.jpg" alt=""></a>
                    <h3>博雅棋牌</h3>
                    <p>点击播放</p>
                </li>
                <li>
                    <a href="#"><img src="http://www.boyaa.com/images/byqpai2.jpg" alt=""></a>
                    <h3>博雅棋牌</h3>
                    <p>点击播放</p>
                </li>

            </ul>
        </div>
    </div>
</body>

</html>